<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    ul{
        width: 800px;
        border: 3px solid red;
        display: flex;

    }
    li {
        width: 100px;
        height: 100px;
        background-color: #bfa;
        /*
            弹性的增长系数
        */
        /*flex-grow: 1;*/
        /*
            弹性元素的缩减系数
        */
        /*flex-shrink: 1;*/
        /*
            flex-basis: 元素在主轴上的基础长度

        */
        /*flex-basis: 100px;*/
        /*
        flex 可以设置元素的增长 缩减 基础三个属性
            initial "flex: 0 1 auto"
            auto "flex: 1 1 auto"
            none "flex: 0 0 auto"
        */
        flex: 1 1 auto;
    }
    li:nth-child(1){
        background-color: #665e57;
        /*flex-grow: 2;*/
        /*
            order改变弹性元素的排列顺序
        */
        order: 3;

    }
    li:nth-child(2){
        background-color: pink;
        order: 1;
        /*flex-grow: 2;*/

    }
    li:nth-child(3){
        background-color: saddlebrown;
        /*flex-grow: 3;*/
        order: 2;
    }

</style>
<body>
<ul>
    <li>1</li>
    <li>2
    </li>
    <li>3
    </li>
</ul>
</body>
</html>
